<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>茶都商城后台管理</title>
    <link rel="stylesheet" href="/plugins/element-ui/index.css">
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
</head>
<body style="background-color:#f2f9fd;">
<div id="index">
    <div class="header bg-main">
        <div class="logo margin-big-left fadein-top">
            <h1 style="display: flex;">
                <el-avatar :size="50" :src="getImage()"></el-avatar>
                <span style="margin-left: 10px">茶都商城后台管理中心</span>
            </h1>
        </div>
        <div class="head-l" style="float: right; margin-right: 40px;">
            <a @click="logout" class="button button-little bg-red" style="cursor: pointer"><span class="icon-power-off"></span> 退出登录</a>
        </div>
    </div>
    <div class="leftnav">
        <div class="leftnav-title"><strong><span class="icon-list"></span>菜单列表</strong></div>

        <h2><span class="icon-home"></span>首页管理</h2>
        <ul>
            <li><a href="/page/banner/list.html" target="right"><span class="icon-caret-right"></span>轮播图列表</a></li>
            <!--<li><a href="/page/activity/list.html" target="right"><span class="icon-caret-right"></span>活动列表</a></li>-->
        </ul>

        <h2><span class="icon-user"></span>用户管理</h2>
        <ul>
            <li><a href="/page/admin/list.html" target="right"><span class="icon-caret-right"></span>管理员列表</a></li>
            <li><a href="/page/user/list.html" target="right"><span class="icon-caret-right"></span>用户列表</a></li>
        </ul>

        <h2><span class="icon-th-large"></span>商品管理</h2>
        <ul>
            <li><a href="/page/product/list.html" target="right"><span class="icon-caret-right"></span>商品列表</a></li>
            <li><a href="/page/category/list.html" target="right"><span class="icon-caret-right"></span>商品分类</a></li>
        </ul>

        <h2><span class="icon-file-text-o"></span>订单管理</h2>
        <ul>
            <li><a href="/page/order/list.html" target="right"><span class="icon-caret-right"></span>订单列表</a></li>
        </ul>

        <h2><span class="icon-search"></span>学茶管理</h2>
        <ul>
            <li><a href="/page/article/list.html" target="right"><span class="icon-caret-right"></span>文章列表</a></li>
            <!--<li><a href="/page/video/list.html" target="right"><span class="icon-caret-right"></span>视频列表</a></li>-->
        </ul>
    </div>

    <ul class="bread">
        <li><a href="/page/welcome.html" target="right" class="icon-home"> 首页</a></li>
        <li><a href="#" id="a_leader_txt">欢迎使用</a></li>
        <li><b>当前用户：</b><span style="color:red;">{{admin.username}}</span></li>
    </ul>
    <div class="admin">
        <iframe scrolling="auto" rameborder="0" src="/page/welcome.html" name="right" width="100%" height="100%"></iframe>
    </div>
</div>

<script src="/js/jquery.js"></script>
<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/axios/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#index',
        data: {
            admin: {}
        },
        methods: {
            logout() {
                axios.get('/admin/logout').then(res => {
                    let info = res.data
                    if (info.code === 1) {
                        sessionStorage.removeItem('admin')
                        window.location.href = '/page/login.html'
                    }
                })
            },
            getImage() {
                return `/common/download?fileName=${this.admin.headerimg}`
            }
        },
        created() {
            if ((this.admin = JSON.parse(sessionStorage.getItem('admin'))) == null)
                window.location.href = '/page/login.html'
        }
    })

    $(function(){
        $(".leftnav h2").click(function(){
            $(this).next().slideToggle(200);
            $(this).toggleClass("on");
        })
        $(".leftnav ul li a").click(function(){
            $("#a_leader_txt").text($(this).text());
            $(".leftnav ul li a").removeClass("on");
            $(this).addClass("on");
        })
    });
</script>
</body>
</html>
